
<script lang="ts" setup>
import { ListenerProp } from '@varlet/ui';
import { computed } from 'vue';

// 定义 props ,同 VarIcon 属性 
const props = defineProps<{
    name: string,
    size?: string | number
    color?: string
    animationClass?: string
    transition?: string | number
    onClick?: ListenerProp<(event: Event) => void>
}>();

// 定义 事件
const emit = defineEmits(['click']);
const onClick = (event: Event) => emit('click', event);

const namespace = computed(() => props.name.split('-')[0]);
const iconName = computed(() => props.name.split('-')[1]);

</script>
<template >
    <VarIcon class="custom-icon" :namespace="namespace" :name="iconName" @click="onClick" :size="size" :color="color"></VarIcon>
</template>
<style lang="scss" scoped>
// 指定padding值
.custom-icon {
    vertical-align: middle;

    &::before {
        vertical-align: middle;
    }
}
</style>